<template>
    <div class="main mainPadding p-t" style="background: #fff;">
      <div class="max-w">
        <listInfo>
            <template v-slot:content>
                <div style="padding:20px 0" v-loading="loading">
                  <div style="height:auto;">
                    <iframe v-if="info.fileType==1" id="iframe" :src="xsrc" frameborder="0" loading="lazy" width="100%" style="max-width:100%;min-height:3000px;"></iframe>
                  </div>
                    
                    <canvas v-if="info.fileType==2" id="pdf-canvas"></canvas>
                </div>
            </template>
        </listInfo>
      </div>
    </div>
  </template>
  
  <script setup>
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import listInfo from '../listInfo.vue';
  const loading = ref(false)
      // 面包屑
      const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob,'query')
      const info = query.info
      const url = ref('')
      const xsrc = ref('')
      const getInfo=()=>{
        loading.value = true
        url.value = 'https://file.xdqycx.com/'+info.fileUrl
          if(info.fileType == 1){
            var file = url.value;
            //XDOC文档预览服务地址
            var xurl = "https://view.xdocin.com/view?src=";
            //传入文档地址
            xurl += encodeURIComponent(file);
            //预览参数
            var ops = {
              // "pdf": true, //word文档尝试以pdf方式显示，默认false
              // "saveable": true, //是否允许保存源文件，默认false
              // "printable": false, //是否允许打印，默认true
              "copyable": false, //是否允许选择复制内容，默认true
              // "toolbar": false, //是否显示底部工具条，默认true
              // "expire": 30, //预览链接有效期，单位分钟，默认永久有效
              // "limit": "1,3", //限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效
              // "mtime": 1633093801, //文件修改时间戳（精确到秒）或修改时间（如：2021-10-01 21:10:01），值改变刷新缓存，实时预览
            };
            for (var a in ops) {
              if (ops[a] != undefined) {
                xurl += "&" + a + "=" + encodeURIComponent(ops[a]);
              }
            }
            //开始预览
            xsrc.value = xurl;
            loading.value = false
          }
          if(info.fileType == 2){
            const pdfUrl = 'https://file.xdqycx.com/'+info.fileUrl
            pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
              const pagesCount = pdf.numPages;
              for (let i = 1; i <= pagesCount; i++) {
                pdf.getPage(i).then(page => {
                  const canvas = document.getElementById('pdf-canvas');
                  const context = canvas.getContext('2d');
                  const viewport = page.getViewport({ scale: 1 });
                  canvas.height = viewport.height;
                  canvas.width = viewport.width;
                  page.render({
                    canvasContext: context,
                    viewport: viewport
                  }).promise.then(() => {
                    const imgUrl = canvas.toDataURL("image/png");
                  });
                });
              }
              loading.value = false
            });
          }
          
          
      }
      getInfo()
  </script>
  
  <style lang='less' scoped>
 ::-webkit-scrollbar-thumb {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: .375rem;
    background-color: rgba(144,147,153,.3);
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    }
    ::-webkit-scrollbar {
        width: .625rem;
        height: .625rem;
    }
    .input-box-iframe{
        width: 1000px;
        height: 600px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin: 0 auto;
        margin-bottom: 1.25rem; 
    }
  ::v-deep #vuePdfApp{
    width: 50%;
  }
  /deep/ .light.pdf-app{
    width: 50%;
  }
  .item{
    height: 260px;
    .img{
        height: 164px;
        width: 100%;
    }
  }
#pdf-canvas{
  // width: 90%;
}
  </style>
  
